<script lang="ts" setup>
import { ref, Ref } from 'vue'
const bgImg = "https://shq.qdjqy.cn/profile/0911/scan/bg.png"
const refreshImg = "https://shq.qdjqy.cn/profile/0911/scan/refresh.png"
const emptyImg = "https://shq.qdjqy.cn/profile/0911/scan/empty.png"

definePage({
  style: {
    navigationStyle: 'custom'
  },
})

const windowHeight = ref((
  uni.getWindowInfo().windowHeight
  - uni.getSystemInfoSync().safeAreaInsets.top
  - uni.getSystemInfoSync().safeAreaInsets.bottom) 
  + 'px'
);
const windowWidth = ref((uni.getWindowInfo().windowWidth) + 'px')

let showCode = ref(true)
function refresh() {
  showCode.value = !showCode.value
}
</script>

<template>
  <view class="scan-container">
    <image class="bg-img" :src="bgImg" mode="widthFix" />

    <view class="content">
      <view class="show-o" v-if="showCode">
        <view class="title">请在进入园区时出示入园码</view>
        <view class="code">
          <l-qrcode value="http://lime.qcoon.cn" size="350rpx"/>
        </view>
        <view class="tips" @click="refresh">
          <image :src="refreshImg" mode="widthFix"></image>
          <span>刷新二维码</span>
        </view>
      </view>
      <view class="hidden-o" v-else>
        <view class="img">
          <image :src="emptyImg" mode="widthFix"></image>
        </view>
        <view class="tip" @click="refresh">没有绑定好客山东一码通 暂时没有入园码哦~</view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.scan-container {
  position: relative;
  width: v-bind(windowWidth);
  height: v-bind(windowHeight);
  overflow: hidden;
}

.bg-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; 
  vertical-align: top;
}

.content {
  position: relative;
  z-index: 1;
  top: 400rpx;
  left: 75rpx;
  width: 600rpx;
  height: 600rpx;
  & .show-o {
    & .title {
      margin-top: 60rpx;
      font-size: 36rpx;
      text-align: center;
      font-weight: 700;
    }
    & .code {
      width: 350rpx;
      height: 350rpx;
      margin: 60rpx auto;
    }
    & .tips {
      text-align: center;
      & image {
        width: 24rpx;
        height: 24rpx;
        vertical-align: top;
        line-height: 30rpx;
        margin: 6rpx 12rpx 0 0;
      }
      & span {
        font-size: 40rpx;
        color: #333;
      }
    }
  }
  & .hidden-o {
    .img {
      width: 380rpx;
      height: 250rpx;
      margin: 150rpx auto 50rpx;
      & image {
        width: 100%;
        height: 100%;
      }
    }
    .tip {
      margin: 0 auto;
      width: 400rpx;

      font-size: 34rpx;
      font-weight: 700;
      text-align: center;
    }
  }
}
</style>
